<script lang="tsx" setup>
/**
 * 产量达成率
 */
import {DateFilterEnum} from "@/pages/data-cockpit/index.ts"
import {nextTick, onMounted, onUnmounted, ref, watch} from "vue"
import * as echarts from 'echarts'

/**
 * 定义props
 */
const props = defineProps<{
  productionAchievementRateData: any
}>()

/**
 * 定义emit
 */
const emit = defineEmits<{
  (e: "change", data: any): void
}>()

/**
 * 时间筛选类型
 */
const dateType = ref(DateFilterEnum.周)

/**
 * 时间类型改变
 */
const handleDateChange = (value: number) => {
  dateType.value = value
  emit('change', dateType.value)
}

/**
 * echarts
 */
const chartRef = ref()
let myChart: echarts.ECharts | null = null

/**
 * 初始化
 */
onMounted(() => {
  initEcharts()
})

/**
 * 取消挂载
 */
onUnmounted(() => {
  if (myChart) {
    window.removeEventListener('resize', handleResize)
    myChart.dispose()
  }
})

/**
 * 重载echarts大小
 */
const handleResize = () => {
  myChart?.resize()
}

/**
 * 初始化echarts
 */
const initEcharts = () => {
  if (!chartRef.value) return
  myChart = echarts.init(chartRef.value)
  const option = {
    grid: {
      top: '10%',
      left: '15%',
      right: '5$',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        fontSize: "14rem",
        color: "#ffffff"
      },
      data: []
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: "14rem",
        color: "#ffffff"
      }
    },
    // dataZoom: [{
    //   startValue: 0,
    //   endValue: 7,
    //   xAxisIndex: 0,
    //   zoomLock: true,
    //   height: "15%",
    //   bottom: "20%"
    // }],
    series: [
      {
        name: "计划产出",
        type: 'bar',
        barMaxWidth: '12rem',
        data: [0, 0, 0, 0, 0, 0, 0],
        itemStyle: {
          borderRadius: [10, 10, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,
              color: 'rgba(36, 161, 251, 0.5)'
            },
            {
              offset: 0.3,
              color: 'rgba(36, 161, 251, 1)'
            }
          ])
        }
      },
      {
        name: "实际产出",
        type: 'bar',
        barMaxWidth: '12rem',
        data: [0, 0, 0, 0, 0, 0, 0],
        itemStyle: {
          borderRadius: [10, 10, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,
              color: 'rgba(0, 208, 143, 0.5)'
            },
            {
              offset: 0.3,
              color: 'rgba(0, 208, 143, 1)'
            }
          ])
        }
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', handleResize)
  getData()
}

/**
 * 获取数据
 */
const getData = () => {
  const option: any = myChart?.getOption()
  const list = [
    {
      date: '4-23',
      quantity_planned_total: 125800,
      quantity_actual_total: 128690
    },
    {
      date: '4-24',
      quantity_planned_total: 130700,
      quantity_actual_total: 126500
    },
    {
      date: '4-25',
      quantity_planned_total: 137400,
      quantity_actual_total: 132000
    },
    {
      date: '4-26',
      quantity_planned_total: 142000,
      quantity_actual_total: 145000
    },
    {
      date: '4-27',
      quantity_planned_total: 139200,
      quantity_actual_total: 132650
    },
    {
      date: '4-28',
      quantity_planned_total: 144000,
      quantity_actual_total: 138500
    },
    {
      date: '4-29',
      quantity_planned_total: 133500,
      quantity_actual_total: 12250
    }
  ]
  option.xAxis = {
    type: 'category',
    axisLabel: {
      fontSize: "14rem",
      color: "#ffffff"
    },
    data: list.map((item: any) => item.date)
  }
  option.series[0].data = list.map((item: any) => item.quantity_planned_total)
  option.series[1].data = list.map((item: any) => item.quantity_actual_total)
  myChart?.setOption(option, true)
}


/**
 * 监视
 */
watch(() => props.productionAchievementRateData, (newValue) => {
  if (newValue) {
    nextTick(() => {
      getData()
    })
  }
}, {
  deep: true,
  immediate: true
})
</script>

<template>
  <div class="production-achievement-rate">
    <div class="title-box">
      <div class="title-img">
        <img alt="" class="title-img-logout" src="/img/data-cockpit/item-title.png"/>
      </div>
      <div class="title">
        <div class="title-content">产量达成率</div>
        <!--        <div class="title-time">-->
        <!--          <div :class="{'title-time-item-active':dateType !== DateFilterEnum.周}" class="title-time-item"-->
        <!--               @click="handleDateChange(DateFilterEnum.周)">周-->
        <!--          </div>-->
        <!--          <div :class="{'title-time-item-active':dateType !== DateFilterEnum.月}" class="title-time-item"-->
        <!--               @click="handleDateChange(DateFilterEnum.月)">月-->
        <!--          </div>-->
        <!--          <div :class="{'title-time-item-active':dateType !== DateFilterEnum.年}" class="title-time-item"-->
        <!--               @click="handleDateChange(DateFilterEnum.年)">年-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
    </div>
    <div class="form">
      <div class="form-title">
        <div class="item">
          <div class="item-icon"></div>
          <div class="item-name">计划产出</div>
        </div>
        <div class="item">
          <div class="item-icon"></div>
          <div class="item-name">实际产出</div>
        </div>
      </div>
      <div ref="chartRef" class="chart"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>